import './index.less'
import { FC, useEffect, useState } from 'react'
import DanmuMessage from '../Danmu/DanmuMessage'

// get a random number between min and max
function getRandom(min: number, max: number) {
    return Math.random() * (max - min) + min
}

const C: FC<{ danmu: DanmuMessage }> = ({ danmu }) => {
    // 10 -50 之间
    const [top, setTop] = useState<number>(0)
    useEffect(() => {
        setTop(getRandom(10, 50))
    }, [])
    return <div style={{ top: `${top}vh` }}
                className={`danmu-unit 
        ${danmu.self ? 'self' : ''}`}>
        {danmu.mesage}
    </div>
}

export default C;